<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-06-01 10:32:23
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-04 17:06:14
-->
<template>
  <div class="signUp">
    <!-- 导航条 -->
    <nav-bar></nav-bar>

    <div class="container">
      <!-- 考试基本信息 -->
      <exam-info :examDetails="examDetails"></exam-info>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 表单 -->
      <el-form label-width="100px">
        <!-- 公共表单 -->
        <public-form v-if="form.length" :form="form" :userInfo="userInfo" ref="publicForm"></public-form>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 特殊表单 -->
        <special-form v-if="form.length" :form="form"></special-form>

        <div class="btn">
          <el-button type="primary" @click="showDialog">提交</el-button>
        </div>
      </el-form>

      <!-- 校验弹窗 -->
      <validator-dialog :dialogVisible.sync="dialogVisible" :validatorArray="validatorArray"></validator-dialog>
      

      <!-- 短信弹窗 -->
      <code-dialog :codeDialogVisible.sync="codeDialogVisible" :examDetails="examDetails" :userInfo="userInfo"></code-dialog>
    </div>
  </div>
</template>

<script>
import examInfo from "./components/examInfo.vue"
import publicForm from "./components/publicForm.vue"
import specialForm from "./components/specialForm.vue"
import validatorDialog from "./components/validatorDialog.vue"
import codeDialog from "./components/codeDialog.vue"

import { getFromUrl } from "api/examList.js";


import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("userInfo");

export default {
  components:{
    examInfo,
    publicForm,
    specialForm,
    validatorDialog,
    codeDialog
  },
  props: {
    eid: {
      //考试id
      type: String,
      required: true,
    },
    data: {
      //考试信息
      type: String,
      required: true,
    },
  },
  data() {
    return {
      examDetails: "", //考试详情信息
      form: [], //表单绑定数据
      dialogVisible: false, //校验弹窗
      codeDialogVisible: false, //短信弹窗
      validatorArray: [], //校验数组
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    API_getFrom(eid) {
      //获取表格接口
      return this.$httpRequest({
        url: getFromUrl,
        method: "POST",
        data: {
          param: {
            eid,
          },
        },
      });
    },
    showDialog() {
      //显示弹窗
      console.log(this.form)

      let bool = this.form.every((item) => {
        return item.value;
      });
      if (!bool) {
        //弹校验窗
        this.validatorArray = this.form.filter((item) => {
          return !item.value;
        });
        this.dialogVisible = true;
      } else {
        //弹短信验证窗
        this.codeDialogVisible = true;
      }
    },
  },
  async created() {
    this.examDetails = JSON.parse(decodeURIComponent(this.data)); //获取考试信息

    let formRes = await this.API_getFrom(this.eid); //获取考试表格
    this.form = JSON.parse(formRes.data.data.form); //表单数据

  },
};
</script>

<style lang="scss" scoped>
@import "style/views/signUp.scss";
</style>